.swiper-container {
    height: 200px;

    .img {
        width: 100%;
        height: 100%;
    }

}



.content {

    padding: 20px 15px;
}

.main-content {
    overflow-y: scroll;
}

.box1 {
    width: 150px;
    height: 150px;

    background: url(../../assets/imgs/index-card-rank.png) no-repeat #1592CC 100%;
    background-size: 100px;
    background-position: -3px 33px;

    h3 {
        font-size: 20px;
        color: rgba(0, 78, 115, 1);
    }

    p {
        color: white;
        font-size: 80px;
        text-align: right;
        font-family: 'PingFangSC-bold';
    }
}

.box2 {
    width: 212px;
    height: 150px;
    background: url(../../assets/imgs/index-card-sum.png) no-repeat #7BCBF5 100%;
    background-size: 100px;
    background-position: 14px 33px;

    h3 {
        font-size: 20px;
        color: rgba(0, 78, 115, 1);
    }

    .daka {
        position: relative;
        p {
            width: 100px;
            height: 40px;
            border-radius: 20px;
            font-size: 16px;
            text-align: center;
            position: absolute;
            bottom: -85px;
            right: 5px;
            border: 3px solid rgba(0, 81, 119, 1);
            line-height: 30px;
            cursor: pointer;
            
        }
    }

}

.box3 {
    width: 180px;
    height: 110px;
    background-color: green;
    background: url(../../assets/imgs/index-card-data.png) no-repeat center /cover;
    h3 {
        font-size: 16px;
        color: white;
        font-weight: normal;
    }
}

.box4 {
    width: 185px;
    height: 110px;

    background: url(../../assets/imgs/index-card-badge.png) no-repeat center /cover;
    background-size: 100px;
    background-position: 14px 14px;
    background-color: #9dbde3;
    color: rgba(0, 81, 119, 1);
    position: relative;
    p {
        color: #004E73 ;
        font-size: 80px;
        
        font-family: 'PingFangSC-bold';
        position: absolute;
        bottom: -5px;
        right: 20px;
    }
}

.box5 {

    height: 110px;
    color: white;
    background-color: orange;
    background: url(../../assets/imgs/index-swiper-bg2.jpg) no-repeat center /cover;
}

.box6 {
    height: 110px;
    background-color: orange;
    background: url(../../assets/imgs/index-card-run.png) no-repeat center /cover;
    color: white;
}

.clocked{
    background: #116085;
    color: white;
}
